<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue'
import footer1 from '../assets/img/footer1.png'
import footer2 from '@/assets/img/footer2.png'
import footer3 from '@/assets/img/footer3.png'
import footer4 from '@/assets/img/footer4.png'
import footer5 from '@/assets/img/footer5.png'
import footer6 from '@/assets/img/footer6.png'
import footer7 from '@/assets/img/footer7.png'
import BigScreenStatisticsList from '@/components/bigScreenStatisticsList/index.vue'
import { enterpriseBrain } from '../api/index'
const elementHeight = ref(0) // 用于存储元素的高度
const centerRef = ref(null)
const ledgerConfig = ref<any>({})
const visibleDetailModel = ref<boolean>(false)

const arrData = [
  {
    name: '树脂台账',
    type: 'resinPage',
    img: footer2
  },
  {
    name: '氢氧化钠台帐',
    type: 'sodiumHydroxidePage',
    img: footer3
  },
  {
    name: '肝素钠台帐',
    type: 'heparinPage',
    img: footer5
  },
  {
    name: '猪小肠台账',
    type: 'pigIntestinePage',
    img: footer6
  },
  {
    name: '碱性蛋白酶台账',
    type: 'proteasePage',
    img: footer7
  },
  {
    name: '酒精台帐',
    type: 'alcoholPage',
    img: footer1
  },
  {
    name: '肠衣盐台帐',
    type: 'intestinalSaltPage',
    img: footer4
  }
]
const enterpriseBrainData: any = ref([])
const getHeight = () => {
  setTimeout((res) => {
    if (centerRef.value) {
      elementHeight.value = centerRef.value.clientHeight // 获取元素的高度
      console.log(elementHeight.value, 'elementHeight')
    }
  }, 1000)
}
// 获取原肠加工、库衣库存
const getEnterpriseBrain = async () => {
  let res: any = await enterpriseBrain({})
  enterpriseBrainData.value = res.data
  console.log(enterpriseBrainData.value, 'enterpriseBrainData.value=')
}
onMounted(() => {
  getEnterpriseBrain()
  getHeight()
  window.addEventListener('resize', getHeight) // 监听窗口大小变化
})
onBeforeUnmount(() => {
  window.removeEventListener('resize', getHeight)
})

function closedModal() {
  visibleDetailModel.value = false
}

function viewLedgerList(item: any) {
  ledgerConfig.value = item
  visibleDetailModel.value = true
}
</script>

<template>
  <div class="centerBox">
    <div class="content">
      <img
        src="http://jinchao.yunctime.com/profile/upload/2025/03/26/centerContetBg_20250326195358A006.png"
        class="centerContetBg"
        alt=""
      />
      <img
        src="http://jinchao.yunctime.com/profile/upload/2025/03/26/centerBg_20250326195433A007.png"
        alt=""
        ref="centerRef"
        class="centerImg"
      />
      <div class="contentInfo">
        <div class="contentInfoItem">
          <div class="contentInfoItemLeft">
            <img class="centerInfoBg" src="@/assets/img/centerInfoBg.png" alt="" />
            <div class="centerInfoContent">
              <div class="name">{{ enterpriseBrainData[0]?.label }}</div>
              <div class="number">{{ enterpriseBrainData[0]?.value }}</div>
            </div>
          </div>
          <div class="contentInfoItemRight">
            <img class="centerInfoBg" src="@/assets/img/centerInfoBg.png" alt="" />
            <div class="centerInfoContent">
              <div class="name">{{ enterpriseBrainData[1]?.label }}</div>
              <div class="number">{{ enterpriseBrainData[1]?.value }}</div>
            </div>
          </div>
        </div>
        <div class="contentInfoItem">
          <div class="contentInfoItemLeft">
            <img class="centerInfoBg" src="@/assets/img/centerInfoBg.png" alt="" />
            <div class="centerInfoContent">
              <div class="name">{{ enterpriseBrainData[2]?.label }}</div>
              <div class="number numberColor">{{ enterpriseBrainData[2]?.value }}</div>
            </div>
          </div>
          <div class="contentInfoItemRight">
            <img class="centerInfoBg" src="@/assets/img/centerInfoBg.png" alt="" />
            <div class="centerInfoContent">
              <div class="name">{{ enterpriseBrainData[3]?.label }}</div>
              <div class="number numberColor">{{ enterpriseBrainData[3]?.value }}</div>
            </div>
          </div>
        </div>

        <div class="contentInfoItem">
          <div class="contentInfoItemLeft">
            <img class="centerInfoBg" src="@/assets/img/centerInfoBg.png" alt="" />
            <div class="centerInfoContent">
              <div class="name">{{ enterpriseBrainData[4]?.label }}</div>
              <div class="number numberColor">{{ enterpriseBrainData[4]?.value }}</div>
            </div>
          </div>
          <div class="contentInfoItemRight">
            <img class="centerInfoBg" src="@/assets/img/centerInfoBg.png" alt="" />
            <div class="centerInfoContent">
              <div class="name">{{ enterpriseBrainData[5]?.label }}</div>
              <div class="number numberColor">{{ enterpriseBrainData[5]?.value }}</div>
            </div>
          </div>
        </div>
        <div class="centerBoxTitle">
          <img src="../assets/img/qite.png" alt="" class="titleBg" />
          <div class="centerBoxTitleName">企业大脑</div>
        </div>
      </div>
    </div>

    <div class="footer">
      <div class="imgBox">
        <div class="imgItem" v-for="v in arrData" :key="v.name" @click="viewLedgerList(v)">
          <img :src="v.img" alt="" class="footerIcon" />
          {{ v.name }}
        </div>
      </div>
    </div>
  </div>
  <BigScreenStatisticsList :visible-model="visibleDetailModel" :ledger-config="ledgerConfig" @closed="closedModal">
  </BigScreenStatisticsList>
</template>

<style lang="scss" scoped>
.centerBox {
  padding: 0 6%;
  position: relative;
  height: 100%;

  .content {
    width: 100%;
    height: 100%;
    position: relative;

    .centerBoxTitle {
      position: relative;

      .titleBg {
        width: 130px;
        height: 44px;
      }

      .centerBoxTitleName {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 100%;
        text-align: center;
        padding-top: 10px;
        font-size: 21px;
        transform: translate(-50%, -50%);
      }
    }

    .centerContetBg {
      width: 100%;
      height: 100%;
      position: absolute;
      top: -10%;
      left: 0;
    }

    .centerImg {
      position: absolute;
      left: 50%;
      top: 40%;
      transform: translate(-56%, -50%);
      width: 60%;
    }
  }

  .contentInfo {
    position: absolute;
    left: 50%;
    top: 40%;
    box-sizing: border-box;
    transform: translate(-50%, -50%);
    width: 100%;
    padding: 0 16%;
    height: 100%;

    .centerBoxTitle {
      position: absolute;
      top: 12%;
      left: 50%;
      transform: translate(-50%, 0%);
    }

    .contentInfoItem {
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      top: 26%;
      left: 0;
      margin: 0 -16%;
      box-sizing: content-box;

      .contentInfoItemLeft,
      .contentInfoItemRight {
        position: relative;

        .centerInfoBg {
          width: 108px;
          height: 108px;
        }

        .centerInfoContent {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          display: flex;
          flex-direction: column;
          align-items: center;

          .name {
            font-size: 9px;
            color: #ffffff;
            white-space: nowrap;
          }

          .number {
            font-size: 18px;
            line-height: 25px;
            text-align: center;
            color: #ffc925;
            padding-top: 8px;
          }
          .numberColor {
            color: #20da33;
          }
        }
      }
    }

    .contentInfoItem:nth-child(3) {
      margin: 0 -8% !important;
    }
    .contentInfoItem:nth-child(1) {
      margin: 0 -8% !important;
    }
  }

  .imgBox {
    position: absolute;
    left: 0;
    bottom: -30px;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;

    .imgItem {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-weight: bold;
      font-size: 12px;

      .footerIcon {
        width: 72px;
        height: 72px;
      }
    }

    .imgItem:nth-child(2),
    .imgItem:nth-child(6) {
      transform: translate(0, -30%);
    }

    .imgItem:nth-child(4) {
      transform: translate(0, -90%);
    }

    .imgItem:nth-child(3),
    .imgItem:nth-child(5) {
      transform: translate(0, -60%);
    }
  }
}
</style>
